<template>
  <div>
    <el-dialog v-model="Visible" title="上传作业" width="500" center @close="HandlerClose" >
      <el-upload
        v-loading="isLoading"
        class="upload-demo"
        drag
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :auto-upload="false"
        ref="upload"
        :on-change="ChangeHandler"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">可拖拽文件上传或者 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            大于1GB的文件请使用<em>ftp</em>上传或者压缩后进行尝试上传
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="HandlerClose">取消</el-button>
          <el-button type="primary" @click="uploadHandler">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { uploadWorkAPI } from "@/api/work";
import { ElMessage } from "element-plus";
import { ref } from "vue";
const props = defineProps(['parentId','currenrId'])
const emits = defineEmits(['getWorkList'])
let Visible = defineModel();
let upload = ref();
let files = ref("");
let isLoading = ref(false);
const ChangeHandler = (file) => {
  if (file.size > 1024 * 1024 * 1024) {
    upload.value.clearFiles();
    ElMessage.error("文件大小超过1GB，请使用ftp上传或者压缩后进行尝试上传");
  } else {
    files.value = file.raw;
    console.log(files.value);
  }
};
const HandlerClose = () => {
    Visible.value = false;
  upload.value.clearFiles();
  isLoading.value = false;
  files.value = ''
};
const uploadHandler = async ()=>{
    if(!files.value) {
        ElMessage.error('请选择文件进行上传')
        return
    }
    isLoading.value = true
    let formData = new FormData()
    formData.append('file',files.value)
   let result = await uploadWorkAPI(props.parentId,props.currenrId,formData)
   if(result?.code === 200) {
    ElMessage.success('上传成功')
    HandlerClose()
    emits('getWorkList')
   }
   isLoading.value = false
}

</script>
<style lang="scss" scoped></style>
